<html>
    <head>
        <title>RhyJS - Demo 1</title>
        <link rel="stylesheet" type="text/css" href="css/all.css" />
        <script type="text/javascript" src="../build/rhy.sample.js" ></script>
        <script type="text/javascript" src="js/all.js"></script>
    </head>
    <body>
        <div id="sample-tab">
            <div>
                <ul class="rhy-tab-menu">
                    <li id="tab1" class="rhy-tab-menu-element"> Drag & drop </li>
                    <li id="tab2" class="rhy-tab-menu-element"> Sliders </li>
                    <li id="tab3" class="rhy-tab-menu-element"> Resizers </li>
                    <li id="tab4" class="rhy-tab-menu-element"> Autocomplete </li>
                </ul>
            </div>
            <div class="rhy-tab-content">
                <div class="rhy-tab-content-element">
                    <div id="target" class="drag-square">
                        <strong>Box 1</strong> : You can drag me. I will only drop on the defined area.
                    </div>
                    <div id="target2" class="drag-square">
                        <strong>Box 2</strong> : You can drag me freely. I won't escape!
                    </div>
                    <div id ="holder">
                        You can drop Box 1 on me. I'll hold it.
                    </div>
                </div>
                <div class="rhy-tab-content-element">
                    <div id="sliders">
                        <div id="slider">
                            <div class="rhy-slider-fill"></div>
                            <div class="rhy-slider-thumb"></div>  
                        </div>

                        <div id="r-slider">
                            <div class="rhy-slider-fill"></div>
                            <div class="rhy-slider-thumb"></div>  
                        </div>

                        <div id="v-slider">
                            <div class="rhy-slider-fill"></div>
                            <div class="rhy-slider-thumb"></div>
                        </div>

                        <div id="rv-slider">
                            <div class="rhy-slider-fill"></div>
                            <div class="rhy-slider-thumb"></div>
                        </div>
                    </div>
                </div>
                <div class="rhy-tab-content-element">
                    <div id="resize">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas 
                        tempor tellus, quis consectetur ipsum posuere at. Integer et risus quis 
                        leo sodales cursus. Vestibulum ante ipsum primis in faucibus orci luctus 
                        et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et 
                        magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eget 
                        lorem et neque feugiat pulvinar vitae in mauris. In ac odio ac libero 
                        sagittis iaculis. Aliquam sit amet viverra orci. Nullam porta, elit at 
                        sollicitudin condimentum, mauris nulla elementum nisl, vitae mollis nunc 
                        odio a justo. Vivamus in justo eros.
                    </div>
                </div>
                
                <div class="rhy-tab-content-element">
                    <input type="text" id="ac" name="ac" />
                    <input type="text" id="ac2" name="ac2" />
                </div>
                
            </div>
        </div>
    </body>
</html>